<template>
  <div class="c-page-header-complex" :class="getWrapClass">
    <div class="complex-header__left">
      <img
        class="header-left__icon"
        :src="require(`@/assets/images/${props.icon}`)"
        v-if="props.icon"
      />
      <div class="header-left__info">
        <div class="header-left__title">
          <span class="header-left__title--text">{{ props.title }}</span>
          <template v-if="(props.desc || $slots.headerDesc) && props.descPlacement === 'inline'">
            <el-divider class="header-left__title--divider" direction="vertical"></el-divider>
            <span class="header-left__title--desc"
              ><slot name="headerDesc">{{ props.desc }}</slot></span
            >
          </template>
          <div class="header-left__title--op">
            <slot name="headerLeftBtn"></slot>
          </div>
        </div>
        <div
          class="header-left__desc"
          v-if="(props.desc || $slots.headerDesc) && props.descPlacement === 'break'"
        >
          <slot name="headerDesc">{{ props.desc }}</slot>
        </div>
      </div>
    </div>
    <div class="complex-header__right">
      <slot name="headerRightBtn"></slot>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: 'CPageHeaderComplex'
};
</script>
<script lang="ts" setup name="CPageHeaderComplex">
import { defineProps, computed } from 'vue';
import { pageHeaderComplexProps } from './page-header-complex';

const props = defineProps(pageHeaderComplexProps);
/**
 * 最外层class
 */
const getWrapClass = computed(() => {
  const cls = [];
  if (props.size && props.size !== 'default') cls.push(`c-page-header-complex--${props.size}`);
  if (props.shadow) cls.push('c-page-header-complex--shadow');
  return cls;
});
</script>

<style lang="scss">
@use '../styles/page-header-complex.scss' as *;
</style>
